<template>
  <page-main>
    <template #right>
      <el-button type="primary" icon="plus" @click="handleOperate(refAddEdit,{},'add')">新增</el-button>
      <!-- <el-button type="danger" icon="delete" @click="handleDelete(tableData.checkedIds)">批量删除</el-button> -->
      <!-- <el-button type="default" icon="download" @click="handleExport('参数','/api/admin/param/export', {})">导出</el-button> -->
    </template>
    <search-form ref="refSearchForm" @confirm="handleSearch" />
    <el-table
          v-loading="tableData.loading"
          ref="refTable"
          :data="tableData.list"
          stripe
          border
          style="width: 100%"
          row-key="id"
          :header-cell-style="tableData.headerCellStyle"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @selection-change="selectCheckbox"
          >
          <el-table-column label="序号" type="index" width="80"/>
          <el-table-column label="封面" prop="coverImageUrl">
					<template #default="scope">
						<div style="display: flex; justify-content: center">
							<ImageUpload v-model:imageUrl="scope.row.coverImageUrl" height="50px" width="50px" disabled />
						</div>
					</template>
				</el-table-column>
          <el-table-column label="活动名称" prop="activitiesName" />
          <!-- <el-table-column label="活动封面" prop="coverImageUrl" show-overflow-tooltip /> -->
          <!-- <el-table-column label="活动平台" prop="platform"/> -->
          <el-table-column label="活动方式" prop="activitiesMethod">
            <template #default="scope">
              <el-tag size="small">{{proxy.$util.selectName(scope.row.activitiesMethod, optionData.activitieMethod)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="活动类型" prop="activitiesType">
            <template #default="scope">
              <el-tag size="small">{{proxy.$util.selectName(scope.row.activitiesType, optionData.activitieType)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="最大报名人数" prop="maxParticipants"/>
          <el-table-column label="实际报名人数" prop="registrationsCount"/>
          <el-table-column label="候补人数" prop="houBuRegistrationsCount"/>
          <el-table-column label="报名费用" prop="amount"/>
          <el-table-column label="所属公会" prop="guildId">
            <template #default="scope">
              {{proxy.$util.selectName(scope.row.guildId, optionData.guildList)}}
            </template>
          </el-table-column>
          <el-table-column label="活动时间">
            <template #default="scope">
              {{scope.row.startTime + " ~ " + scope.row.endTime}}
            </template>
          </el-table-column>
          <!-- <el-table-column label="推荐语&备注" prop="recommendations"/> -->
          <el-table-column label="发起人" prop="initiatorUserName"/>
          <el-table-column label="签到" prop="status">
            <template #default="scope">
              {{proxy.$util.selectName(scope.row.isCheckinRequired, optionData.yesnoType)}}
            </template>
          </el-table-column>
          <el-table-column label="活动进度" prop="status">
            <template #default="scope">
              <el-tag size="small">{{proxy.$util.selectName(scope.row.status, optionData.activitieStatus)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="isOffline">
            <template #default="scope">
              <el-tag size="small" :type="scope.row.isOffline == '0' ? 'success' : 'danger'">
                {{ scope.row.isOffline == '0' ? '上架' : '下架' }}
              </el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column label="创建人" prop="createBy"/> -->
          <el-table-column label="创建时间" prop="createTime"/>
          <el-table-column label="操作" fixed="right" width="180" align="center">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                text
                @click="handleOperate(refShowDetail,scope.row)"
              >查看</el-button>
              <el-button
                size="small"
                type="primary"
                text
                @click="handleOperate(refShowManage,scope.row)"
              >管理</el-button>
              <el-button
                size="small"
                type="primary"
                text
                @click="handleOperate(refAddEdit,scope.row,'edit')"
                v-if="scope.row.status != '4'"
              >编辑</el-button>
              <el-button
                size="small"
                type="danger"
                text
                @click="handleDeleteMultiple([scope.row.id])"
              >删除</el-button> 
              <el-button
                size="small"
                type="primary"
                text
                v-if="scope.row.status == 1"
                @click="handleOperate(refHandleAudit,scope.row)"
              >审核</el-button>
              <el-button
                size="small"
                type="primary"
                text
                @click="onOffActivity(scope.row)"
              >{{ scope.row.isOffline == '0' ? '下架' : '上架' }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="pageData.current"
          :page-size="pageData.size"
          :page-sizes="pageData.pageSizes"
          :total="pageData.total"
          background
          style="padding: 30px 0; text-align: center;"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="getList"
          @size-change="sizeChange"
        />
        <add-edit ref="refAddEdit" name="活动" @confirm="getList(dlgAddEdit.type == 'add'? 1 : pageData.current)"></add-edit> 
        <show-detail ref="refShowDetail" />
        <show-manage ref="refShowManage" />
        <handle-audit ref="refHandleAudit" @confirm="getList(pageData.current)" />
  </page-main>
</template>

<script setup lang="ts">
const ImageUpload = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));
import city from '/@/assets/js/city';
// import {onMounted, ref, reactive, provide,defineAsyncComponent, getCurrentInstance, ComponentInternalInstance} from 'vue';
let obj = {
  pageApi: '/admin/activities/page',
  deleteApi: '/admin/activities',
  primaryKey: 'id',
  searchFixed:{},
}
import { useList } from '/@/assets/compositionFn/list';
import { ElMessage,ElMessageBox, rowContextKey } from 'element-plus';
let { dlgAddEdit, tableData, pageData, optionDataStore, getList, handleSearch, sizeChange, selectCheckbox, setDefaultCheckbox, handleOperate, handleDelete, handleDeleteMultiple, handleExport } = useList(obj);
const SearchForm = defineAsyncComponent(() => import('./components/SearchForm.vue'));
const AddEdit = defineAsyncComponent(() => import('./components/AddEdit.vue'));
const ShowDetail = defineAsyncComponent(() => import('./components/ShowDetail.vue'));
const HandleAudit = defineAsyncComponent(() => import('./components/HandleAudit.vue'));
const ShowManage = defineAsyncComponent(() => import('./components/ShowManage.vue'));
const {proxy} :any = getCurrentInstance() as ComponentInternalInstance;
const refSearchForm = ref();
const refTable = ref();
const refAddEdit = ref();
const refShowDetail = ref();
const refHandleAudit = ref();
const refShowManage = ref();
const optionData:any = reactive({});

provide('optionData', optionData);
const getInitData = async ()=>{
  optionData.yesnoType = await optionDataStore.getDictList('yes_no_type');
  optionData.activityRole = await optionDataStore.getDictList('activity_role');
  optionData.activitieType = await optionDataStore.getDictList('activitie_type');
  optionData.activitieStatus = await optionDataStore.getDictList('activitie_status');
  optionData.activitieMethod = await optionDataStore.getDictList('activitie_method');
  let guildList = await proxy.$request('get', '/admin/guilds/page?page=1&current=1&size=1000', {});
  let list = guildList.records.filter(item => item.pid != 0);
  optionData.guildList = proxy.$util.transformArray(list, 'guildId', 'guildName');
  optionData.cityList = [];
    city.forEach(item => {
      optionData.cityList = optionData.cityList.concat(item);
    });

};
const onOffActivity = (row) => {
  let tips = '下架';
  let params = {
    id: row.id,
    isOffline: '1',
  }
  if(row.isOffline == '1'){
    tips = '上架';
    params.isOffline = '0';
  }
  ElMessageBox.confirm(
    '确定要'+ tips + '吗？',
    '提示',  
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
  }).then(() => {
    proxy.$request('get', '/admin/activities/updateActivityIsOffline', params, (data,msg) => {
      ElMessage.success('提交成功');
      getList(pageData.current);
    })
  })
  
}
onMounted(async () => {
  await getInitData();
  getList()
  
})
</script>

<style>

</style>